<script setup >
import {watch,ref} from 'vue'
const page = ref(1)
const pagesize =ref(10)

// 对象类型
const user=ref({
    name:'lisu',
    info:{
      gender:'男',
      age:18
    }
})
watch([page,pagesize],(newva,oldva)=>{
  console.log('xin',newva)
  
})
watch(()=>user.value.name,(newva,oldva)=>{
  console.log('xin ',newva)
  console.log('jiu ',oldva)

},{immediate:true})

watch(()=>user.value.info,(newva,oldva)=>{
  console.log('新对象',newva)
  console.log('对象旧',oldva)
},{deep:true})
</script>

<template>
 <p>{{page}}</p>
 <button @click="page+=1">ye</button>
 <p>{{pagesize}}</p>
 <button @click="pagesize+=1">size</button>
 <p>{{user.name}}</p>
 <button @click="user.name+='变'">变</button>
 <p>{{user.info.gender}}</p>
 <p>{{user.info.age}}</p>
 <button @click="user.info.age+=1">++</button>
</template>
<style>
</style>